<?php
/**
 * 代码 编辑器
 * User: apple
 * Date: 1/23/22
 * Time: 9:54 PM
 */

use app\assets\BackendAsset;

/* @var $this yii\web\View */
/* @var $_params_ array 总参数变量 */
/* @var $groupFields string 组合字段 列表 */
/* @var $groupOtherFields int 组合字段右侧空白处查询 */
/* @var $baseFields string 基础字段 列表 */
/* @var $moreFields string 更多字段 列表 */
/* @var $baseColumn int 基础字段 一行展示几个 */
/* @var $moreColumn int 更多字段 一行展示几个 */
/* @var $export string 最终查询值列表 */
/* @var $submit string 提交函数名称 */
/* @var $prefix string 前缀，主要用作ID，等 */
/* @var $smallScreenWidth int 小屏幕宽度 */

// 前缀
$prefix = empty($prefix) ? 'search' : $prefix;
// [组合字段]默认
$groupFields = empty($groupFields) ? 'null' : $groupFields;
// [组合字段右侧空白处查询]默认
$groupOtherFields = empty($groupOtherFields) ? 'null' : $groupOtherFields;
// [基础字段]默认
$baseFields = empty($baseFields) ? 'null' : $baseFields;
// [更多字段]默认
$moreFields = empty($moreFields) ? 'null' : $moreFields;
// [基础字段]一行展示几个 默认4个
$baseColumn = empty($baseColumn) ? 4 : $baseColumn;
// [更多字段]一行展示几个 默认4个
$moreColumn = empty($moreColumn) ? 4 : $moreColumn;
// 最终查询值列表
$export = empty($export) ? '' : "v-model='" . $export . "'";
// 提交函数
$submit = empty($submit) ? '' : ":submit='" . $submit . "'";
// 小屏幕宽度
$smallScreenWidth = empty($smallScreenWidth) ? 1200 : $smallScreenWidth;

// HTML
$template = <<<HTML

<div>
    <el-form :inline="true" @submit.native.prevent="submit" class="search-container">
        <div class="item flex-center-left item-group">
            <div v-for="(item, key, index) in groupOtherFields" class="search-item">
                <el-form-item :label="item.text" v-if="item.type == 'cardRadio'" :ref="'formItem_' + item.name"
                    :id="'formItem_' + item.name">
                    <el-radio-group v-model="value[item.name]" @change="selShowOptions(item)" size="mini"
                        class="card-mode">
                        <el-radio label="">{{getText('全部', item.appendText)}}</el-radio>
                        <el-radio v-for="option in getShowOptions(item)" :label="option.value">
                            {{getText(option.text, item.appendText)}}
                        </el-radio>
                    </el-radio-group>
                    <el-dropdown trigger="click" class="display-inline" v-if="isHadHideOpt(item)">
                        <el-button size="mini" :class="cardRadioSelHideText(item) ? 'active' : ''"
                            class="card-radio-btn">
                            <span v-text="cardRadioSelHideText(item)"></span>
                            <i class="el-icon-arrow-down"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :label="item.value" v-for="option in getHideOptions(item)"
                                    @click.native="selHideOptions(item, option.value, option.text)"
                                    :class="value[item.name]===option.value?'active':''">
                                {{getText(option.text, item.appendText)}}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-form-item>
                <el-form-item :label="item.text" v-else-if="item.type == 'radio'" :ref="'formItem_' + item.name"
                    :id="'formItem_' + item.name">
                    <el-radio-group @change="submit()" v-model="value[item.name]">
                        <el-radio-button label="">{{getText('全部', item.appendText)}}</el-radio-button>
                        <el-radio-button :label="option.value" v-for="option in item.option">
                            {{getText(option.text, item.appendText)}}
                        </el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="item.text" v-else-if="item.type == 'select'" :ref="'formItem_' + item.name"
                    :id="'formItem_' + item.name">
                    <el-select :placeholder="'请选择' + getLabel(item)" size="small" clearable
                        v-model="value[item.name]" @change="submit()" class="form-item">
                        <el-option :label="getText('全部', item.appendText)" :value="''"></el-option>
                        <el-option v-for="option in item.option" :label="getText(option.text, item.appendText)"
                            :value="option.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="item.text" v-else-if="item.type == 'searchSelect'" :ref="'formItem_' + item.name"
                    :id="'formItem_' + item.name">
                    <el-select :placeholder="'请选择' + getLabel(item)" size="small"
                        v-model="value[item.name]" class="form-item remote" filterable remote
                        :remote-method="item.method" :multiple="item.multiple" reserve-keyword
                         collapse-tags :ref="'groupOther_' + item.name" :loading="item.loading">
                            
                        <el-option v-for="option in item.option" :value="option.value"
                            :label="option.text">
                        </el-option>
                        <el-pagination @size-change="handleSizeChange(item, 'groupOther')"
                                       @current-change="handleCurrentChange(item, 'groupOther')"
                                       :current-page.sync="item.page"
                                       :page-sizes="[1, 20, 50, 100, 200]"
                                       :page-size.sync="item.pageSize"
                                       layout="total, prev, pager, next, jumper"
                                       :total="item.dataTotal"
                                       class="pt-10 pb-5 ph-15">
                        </el-pagination>
                    </el-select>
                </el-form-item>
                <el-form-item :label="item.text" :label="item.text" v-else-if="item.type == 'treeSelect'" :ref="'formItem_' + item.name"
                    :id="'formItem_' + item.name">
                    <treeselect v-model="value[item.name]" :options="item.option"
                                :default-expand-level="99999" class="el-form-item-250"
                                :placeholder="'请选择' + getLabel(item)" ref="selectCate"
                                :noChildrenText="'暂无' + getLabel(item)" @input="submit()"
                                :load-options="item.loadOptions">
                        <label slot="option-label" slot-scope="{ node }">
                            {{ node.raw.name }}
                        </label>
                        <label slot="value-label" slot-scope="{ node }">
                            {{ node.raw.name }}
                        </label>
                    </treeselect>
                </el-form-item>
            </div>
            <div class="el-form-item-more search-item flex-center-right">
                <el-form-item label="" class="search-item group-search no-pt" ref="formItem_groupSearch"
                    id="formItem_groupSearch">
                    <el-input :placeholder="'请输入' + groupText" v-model="searchTopValue" size="small"
                            type="text" class="input-with-select vert-align-init" clearable>
                        <el-select v-model="searchTopType" slot="prepend" size="small"
                                   placeholder="请选择字段" class="form-item" style="width: 130px;">
    
                            <el-option v-for="item in groupFields" :label="item.text"
                                :value="item.name"></el-option>
                                
                        </el-select>
                    </el-input>
                    <el-button type="primary" class="ml-20" icon="el-icon-search" size="mini" plain
                        @click.native="submit">
                        搜索
                    </el-button>
                    <el-button type="warning" class="ml-10" icon="el-icon-refresh" size="mini" plain
                        @click.native="reset">
                        重置
                    </el-button>
                </el-form-item>
                <el-form-item label="" class="">
                    <el-popover :width="bodyWidth * 0.9" v-model="showAllSearch" placement="bottom"
                        @hide="moreSearchCancel" popper-class="search-popover more-group">
                        <el-form class="search-container item-group flex-center-left"
                            @submit.native.prevent :inline="true">
                            <div v-for="(item, key) in moreFields" class="search-item mr-20 mb-10">
                                <el-form-item :label="item.text" v-if="item.type == 'input'"
                                    :ref="'formItem_' + item.name" :id="'formItem_' + item.name">
                                    <el-input :placeholder="'请输入' + item.text" size="small"
                                        v-model="inMoreFields[item.name]" type="text" clearable
                                        class="input-with-select vert-align-init">
                                    </el-input>
                                </el-form-item>
                                <el-form-item :label="item.text" v-else-if="item.type == 'cardRadio'"
                                    :ref="'formItem_' + item.name" :id="'formItem_' + item.name">
                                    <el-radio-group v-model="inMoreFields[item.name]"
                                        size="mini" class="card-mode" @change="selMoreShowOptions(item)">
                                        <el-radio label="">{{getText('全部', item.appendText)}}</el-radio>
                                        <el-radio v-for="option in getShowOptions(item)" :label="option.value">
                                            {{getText(option.text, item.appendText)}}
                                        </el-radio>
                                    </el-radio-group>
                                    <el-dropdown trigger="click" class="display-inline"
                                        v-if="isHadHideOpt(item)">
                                        <el-button size="mini" class="card-radio-btn" :class="item.sel_text ? 'active' : ''">
                                            <span v-text="item.sel_text"></span>
                                            <i class="el-icon-arrow-down"></i>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item :label="item.value"
                                                v-for="option in getHideOptions(item)"
                                                @click.native="selMoreHideOptions(item, option.value, option.text)"
                                                :class="inMoreFields[item.name]===option.value+''?'active':''">
                                                {{getText(option.text, item.appendText)}}
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </el-form-item>
                                <el-form-item :label="item.text" v-else-if="item.type == 'radio'"
                                    :ref="'formItem_' + item.name" :id="'formItem_' + item.name">
                                    <el-radio-group v-model="inMoreFields[item.name]">
                                        <el-radio-button label="">{{getText('全部', item.appendText)}}</el-radio-button>
                                        <el-radio-button v-for="option in item.option" :label="option.value">
                                            {{getText(option.text, item.appendText)}}
                                        </el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item :label="item.text" v-else-if="item.type == 'select'"
                                    :ref="'formItem_' + item.name" :id="'formItem_' + item.name">
                                    <el-select :placeholder="'请选择' + getLabel(item)" size="small"
                                        v-model="inMoreFields[item.name]" @change="submit()"
                                         class="form-item">
                    
                                        <el-option :label="getText('全部', item.appendText)" :value="''"></el-option>
                            
                                        <el-option :label="getText(option.text, item.appendText)"
                                            v-for="option in item.option" :value="option.value"></el-option>
                    
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="item.text" v-else-if="item.type == 'treeSelect'"
                                    :ref="'formItem_' + item.name" :id="'formItem_' + item.name">
                                    <treeselect v-model="inMoreFields[item.name]" :options="item.option"
                                                :default-expand-level="99999"
                                                class="el-form-item-250"
                                                :placeholder="'请选择' + getLabel(item)" ref="selectCate"
                                                :noChildrenText="'暂无' + getLabel(item)"
                                                :load-options="item.loadOptions">
                                        <label slot="option-label" slot-scope="{ node }">
                                            {{ node.raw.name }}
                                        </label>
                                        <label slot="value-label" slot-scope="{ node }">
                                            {{ node.raw.name }}
                                        </label>
                                    </treeselect>
                                </el-form-item>
                                <el-form-item :label="item.text" v-else-if="item.type == 'dateTimeRange'"
                                    :ref="'formItem_' + item.name" :id="'formItem_' + item.name">
                                    <el-date-picker v-model="inMoreFields[item.name]" type="datetimerange"
                                        range-separator="至" start-placeholder="开始日期" clearable size="small"
                                        end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item :label="item.text" v-else-if="item.type == 'searchSelect'"
                                    :ref="'formItem_' + item.name">
                                    <el-select :placeholder="'请选择' + getLabel(item)" size="small"
                                        v-model="inMoreFields[item.name]" class="form-item remote"
                                        filterable :remote-method="item.method" collapse-tags
                                        :ref="'groupMore_' + item.name" :loading="item.loading"
                                        remote :multiple="item.multiple" reserve-keyword>
                                            
                                        <el-option v-for="option in item.option" :value="option.value"
                                            :label="option.text">
                                        </el-option>
                                        <el-pagination @size-change="handleSizeChange(item, 'groupMore')"
                                               @current-change="handleCurrentChange(item, 'groupMore')"
                                               :current-page.sync="item.page"
                                               :page-sizes="[1, 20, 50, 100, 200]"
                                               :page-size.sync="item.pageSize"
                                               layout="total, prev, pager, next, jumper"
                                               :total="item.dataTotal"
                                               class="pt-10 pb-5 ph-15">
                                        </el-pagination>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <el-form-item label="" v-if="!moreFields||moreFields.length<1"
                                class="no-more-search">
                                <el-empty description="暂无更多查询" image-size="70"
                                          class="no-p"></el-empty>
                            </el-form-item>
                        </el-form>
                        <div class="search-bottom">
                            <el-button type="danger" size="mini" @click="moreSearchReset">
                                重置
                            </el-button>
                            <el-button type="primary" size="mini" @click="moreSearchSubmit">
                                确定
                            </el-button>
                        </div>
                        <el-button :type="showAllSearch ? 'primary' : ''" size="mini"
                                   @click.native="moreSearchClick" slot="reference">
                            <span  :class="showAllSearch ? '' : 'font-fifth'">
                                更多查询&nbsp;
                                <i v-if="!showAllSearch" class="el-icon-setting font-fifth"></i>
                                <i v-else class="el-icon-setting el-icon-s-tools"></i>
                            </span>
                        </el-button>
                    </el-popover>
                </el-form-item>
            </div>
        </div>
        <div v-for="group in group(baseFields, $baseColumn)" class="flex-center-left item-group">
            <div v-for="(item, key, index) in group" :class="item.isRight ? 'is-right' : ''"
                class="search-item">
                <el-form-item :label="item.text" v-if="item.type == 'cardRadio'" :ref="'formItem_' + item.name"
                    :id="'formItem_' + item.name">
                    <el-radio-group v-model="value[item.name]" @change="selShowOptions(item)" size="mini"
                        class="card-mode">
                        <el-radio label="">{{getText('全部', item.appendText)}}</el-radio>
                        <el-radio v-for="option in getShowOptions(item)" :label="option.value">
                            {{getText(option.text, item.appendText)}}
                        </el-radio>
                    </el-radio-group>
                    <el-dropdown trigger="click" class="display-inline" v-if="isHadHideOpt(item)">
                        <el-button size="mini" class="card-radio-btn" :class="cardRadioSelText(item) ? 'active' : ''">
                            <span v-text="cardRadioSelText(item)"></span>
                            <i class="el-icon-arrow-down"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :label="option.value" v-for="option in getHideOptions(item)"
                                    @click.native="selHideOptions(item, option.value, option.text)"
                                    :class="value[item.name]===option.value?'active':''">
                                {{getText(option.text, item.appendText)}}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-form-item>
                <el-form-item :label="item.text" v-else-if="item.type == 'radio'" :ref="'formItem_' + item.name"
                    :id="'formItem_' + item.name">
                    <el-radio-group @change="submit()" v-model="value[item.name]">
                        <el-radio-button label="">{{getText('全部', item.appendText)}}</el-radio-button>
                        <el-radio-button :label="option.value" v-for="option in item.option">
                            {{getText(option.text, item.appendText)}}
                        </el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="item.text" v-else-if="item.type == 'select'" :ref="'formItem_' + item.name"
                    :id="'formItem_' + item.name">
                    <el-select v-model="value[item.name]" :placeholder="'请选择' + getLabel(item)"
                        size="small" @change="submit()" class="form-item">
    
                        <el-option :label="getText('全部', item.appendText)" :value="''"></el-option>
                        <el-option v-for="option in item.option" :label="getText(option.text, item.appendText)"
                            :value="option.value"></el-option>
    
                    </el-select>
                </el-form-item>
                <el-form-item :label="item.text" label="" v-else-if="item.type == 'treeSelect'" :ref="'formItem_' + item.name"
                    :id="'formItem_' + item.name">
                    <treeselect v-model="value[item.name]" :options="item.option"
                                :default-expand-level="99999" class="el-form-item-250"
                                :placeholder="'请选择' + getLabel(item)" ref="selectCate"
                                :noChildrenText="'暂无' + getLabel(item)" @input="submit()"
                                :load-options="item.loadOptions">
                        <label slot="option-label" slot-scope="{ node }">
                            {{ node.raw.name }}
                        </label>
                        <label slot="value-label" slot-scope="{ node }">
                            {{ node.raw.name }}
                        </label>
                    </treeselect>
                </el-form-item>
            </div>
        </div>
    </el-form>
</div>

HTML;

$js = <<<EOT

Vue.component('treeselect', VueTreeselect.Treeselect);
Vue.component('search', {
    template: `$template`,
    props: {
        groupFields: { // 组合字段列表(左侧下拉类型查询)
            type: Array,
            default: []
        },
        groupOtherFields: { // 组合字段右侧列表
            type: Array,
            default: []
        },
        baseFields: { // 基础字段列表(下面的查询)
            type: Array,
            default: []
        },
        moreFields: { // 更多字段列表
            type: Array,
            default: []
        },
        value: { // 导出数据
            type: Object,
            default: {}
        },
        submit: { // 获取列表方法|提交方法
            type: Function,
            default: function () {}
        }
    },
    data: function () {
        return {
            bodyWidth: document.documentElement.clientWidth, // body宽度
            searchTopType: this.groupFields[0] ?
                this.groupFields[0]['name'] : null,          // 顶部搜索类型
            searchTopValue: '',                              // 顶部搜索内容
            groupText: this.groupFields[0] ?
                this.groupFields[0]['text'] : '',            // 顶部搜索文本
            inMoreFields: {},                                // [更多查询]虚拟字段
            showAllSearch: false,                            // 是否出现[更多查询]按钮
            optMaxShow: 5,                                   // radio字段选项 默认最大展示数
            baseFieldsLength: \$w.format_number(
                this.baseFields.length / $baseColumn, 0, 1
            ),                                               // 基础字段数据数据长度
            isSmallScreen: false,                            // 是否小屏幕
            resetValue: {},                                  // 备份重置[value]
            initializedGroups: [],                           // 已初始化的分组列表
        };
    },
    created: function () {
        // 初始化字段 - groupFields
        this.initField('groupFields');
        // 初始化字段 - groupOtherFields
        this.initField('groupOtherFields');
        // 初始化字段 - baseFields
        this.initField('baseFields');
        // 初始化字段 - moreFields
        this.initField('moreFields');
        
        var that = this;
        this.\$nextTick(function () {
            return $(window).resize(function() {
                // 超过此宽度展示 更多筛选
                var bodyDom = document.getElementsByTagName('body');
                if (bodyDom[0] &&
                    bodyDom[0].clientWidth <= $smallScreenWidth
                ) {
                    that.\$set(that, 'isSmallScreen', true);
                } else {
                    that.\$set(that, 'isSmallScreen', false);
                }
            }).resize();
        });
    },
    methods: {
        /**
         * 初始化某些数据
         * @params \$groupName 字段分组名
         * @params \$isForce 是否强制覆盖初始化
         */
        initField: function (\$groupName, \$isForce)  {

            var fields = this[\$groupName];
            if (!fields) return false;
            
            // 循环字段 出默认最终数据供以数据绑定
            for(var i in fields) {
                if (!fields.hasOwnProperty(i)) continue;
                
                if (this.value[fields[i]['name']] !== undefined && !\$isForce) continue;
                // 赋值默认值 没有则为null
                if (!this.value[fields[i]['name']]) {
                    this.\$set(this.value, fields[i]['name'], fields[i]['default'] !== undefined ?
                        fields[i]['default'] : ''
                    );
                }
                
                if (fields[i]['type'] == 'cardRadio') {
                    var selIndex = false, selText = '', selValue = '',index = -1;
                    for(var x in fields[i].option) {
                        index++;
                        if (fields[i].option[x].value != fields[i]['default']) continue;
                        selIndex = index;
                        selText  = fields[i].option[x].text;
                        selValue  = fields[i].option[x].value;
                    }
                    // 小屏 && 点选index是隐藏列表
                    if (this.isSmallScreen && selIndex > fields[i].minShow) {
                        this.selHideOptions(fields[i], selValue, selText)
                    }
                    // 大屏 && 点选index是隐藏列表
                    if (!this.isSmallScreen && selIndex > fields[i].maxShow) {
                        this.selHideOptions(fields[i], selValue, selText)
                    }
                }
            }
            
            // 备份[value]内容用于重置恢复查询
            if (!\$w.in_array(\$groupName, this.initializedGroups)) {
                this.\$set(this, 'resetValue', \$w.dataNoBind(this.value));
                this.initializedGroups.push(\$groupName);
            }
        },
        /**
         * 分组某些数据
         */
        group: function (\$fields, \$columnNum)  {
        
            if (!\$fields) return false;
            
            // 默认一行展示数
            \$columnNum = !\$columnNum ? $baseColumn : \$columnNum;
            var endData = []; // 字段默认为空
            var index = 0;
            // 循环字段 出默认最终数据供以数据绑定
            for(var i in \$fields) {
                if (!\$fields.hasOwnProperty(i)) continue;
                
                // 如果单独一行，先换一次行
                if (\$fields[i].isAlone) index++;
                // 默认初始化
                if (!endData[index]) endData[index] = [];
                
                endData[index].push(\$fields[i]);
                
                // 如果一行满了需要换行||如果单独一行下一个数据也换行
                if (endData[index].length >= \$columnNum || \$fields[i].isAlone) index++;
            }
            
            return endData;
        },
        /**
         * 重置全部搜索
         */
        reset: function () {
            // 恢复顶部查询
            this.searchTopValue = null;
            // 恢复查询[value] - 必须循环走，不然无法更新
            var resetValue = \$w.dataNoBind(this.resetValue);
            for (i in resetValue) {
                this.\$set(this.value, i, resetValue[i]);
            }
            // 提交查询
            this.submit();
        },
        /**
         * 获取标签
         */
        getLabel: function (\$item) {
            return \$item.text ? \$item.text : '';
        },
        /**
         * 获取文本
         */
        getText: function (\$label, \$appendText) {
            // 基础文本
            var endTxt = \$label;
            // 判断追加尾部文本
            if (\$appendText === undefined) {
                \$appendText = '列表';
            }
            return endTxt + \$appendText;
        },
        /**
         * 获取[基础字段]当前字段样式
         */
        getBaseClass: function (\$index) {
            var className = [];
            // 需要换行
            if ((\$index + 1) % this.baseColumn === 0 && !this.baseFields[\$index]['isAlone']) {
                className.push('item flex-center-auto');
            }
            return className.join(' ');
        },
        /**
         * [card radio]已选择藏选项卡文本
         * @param \$item
         * @returns {boolean}
         */
        cardRadioSelHideText: function (\$item) {
            var options = \$w.array_index(\$w.dataNoBind(this.getHideOptions(\$item)), 'value');
            return options[this.value[\$item['name']]] ?
                options[this.value[\$item['name']]]['text'] : '';
        },
        /**
         * 选择card radio值 展示选项卡
         * @param \$item
         * @returns {boolean}
         */
        selShowOptions: function (\$item) {
            // 赋文本
            this.\$set(\$item, 'sel_text', '');
            this.submit();
        },
        /**
         * 选择card radio值 隐藏选项卡
         * @param \$item
         * @param \$value
         * @param \$text
         * @returns {boolean}
         */
        selHideOptions: function (\$item, \$value, \$text) {
        
            if (this.value[\$item.name] === undefined) return false;
            // 选择值未变化
            if (+this.value[\$item.name] === +\$value) return false;
            // 赋值
            this.\$set(this.value, \$item.name, \$value);
            // 赋文本
            this.\$set(\$item, 'sel_text', \$text);
            this.submit();
        },
        /**
         * [更多查询]按钮点击
         */
        moreSearchClick: function (\$reset) {
            // 做出虚拟字段
            this.inMoreFields = {}, item = '', defaultVal = null;
            for(var i in this.moreFields) {
                if (!this.moreFields.hasOwnProperty(i)) continue;
                
                item = this.moreFields[i];
                
                if (\$reset === true) {
                    defaultVal = \$w.isEmpty(item['default']) ? '' : item['default'];
                } else if(this.value[item['name']] !== undefined) {
                    defaultVal = this.value[item['name']];
                } else if (item['default'] !== undefined) {
                    defaultVal = item['default'];
                } else defaultVal = null;
                
                this.\$set(this.inMoreFields, item['name'], defaultVal);
            }
        
            this.showAllSearch = true;
        },
        /**
         * 选择更多搜索的card radio值 展示选项卡
         * @param \$item
         * @returns {boolean}
         */
        selMoreShowOptions: function (\$item) {
            // 赋文本
            this.\$set(\$item, 'sel_text', '');
        },
        /**
         * 选择更多搜索的card radio值 隐藏选项卡
         * @param \$item
         * @param \$value
         * @param \$text
         * @returns {boolean}
         */
        selMoreHideOptions: function (\$item, \$value, \$text) {
        
            // 赋值
            this.\$set(this.inMoreFields, \$item.name, \$value);
            
            if (this.inMoreFields[\$item.name] === undefined) return false;
            // 赋值
            this.\$set(this.inMoreFields, \$item.name, \$value);
            // 赋文本
            this.\$set(\$item, 'sel_text', \$text);
        },
        /**
         * [更多查询]提交
         */
        moreSearchSubmit: function () {

            // 先将更多查询合并入普通查询
            for(var i in this.inMoreFields) {
                if (!this.inMoreFields.hasOwnProperty(i)) continue;
                
                this.\$set(this.value, i, this.inMoreFields[i]);
            }
            
            this.submit(); // 查询列表

            var that = this;
            this.\$nextTick(function () {
                that.showAllSearch = false; // 更多搜索- 隐藏
            });
        },
        /**
         * [更多查询]重置
         */
        moreSearchReset: function () {
        
            this.moreSearchClick(true);
        },
        /**
         * [更多查询]取消
         */
        moreSearchCancel: function () {
        
            // 取消展示
            this.showAllSearch = false;
        },
        /**
         * 获取[选项]展示列表
         */
        getShowOptions: function (\$item) {
        
            // 默认最大显示数量
            \$maxShow = this.optMaxShow;
            // 默认值赋值
            \$item.minShow = \$w.isEmpty(\$item.minShow) ? \$item.maxShow : \$item.minShow;
            \$item.maxShow = \$w.isEmpty(\$item.maxShow) ? \$item.minShow : \$item.maxShow;
            // 小屏幕并且有小屏展示数量
            if (this.isSmallScreen && \$item.minShow) {
                \$maxShow = \$item.minShow;
            }
            // 大屏幕并且有大屏展示数量
            else if (!this.isSmallScreen && \$item.maxShow) {
                \$maxShow = \$item.maxShow;
            }
            
            \$options = \$item.option;
            // 都可以展示
            if (!\$options || \$options.length <= \$maxShow) return \$options;
            
            var stage = \$w.dataNoBind(\$options);
            stage = \$w.array_values(stage);
            stage.splice(\$maxShow);
            return stage;
        },
        /**
         * 获取[选项]折叠列表
         */
        getHideOptions: function (\$item) {
            // 默认最大显示数量
            \$maxShow = this.optMaxShow;
            // 默认值赋值
            \$item.minShow = \$w.isEmpty(\$item.minShow) ? \$item.maxShow : \$item.minShow;
            \$item.maxShow = \$w.isEmpty(\$item.maxShow) ? \$item.minShow : \$item.maxShow;
            // 小屏幕并且有小屏展示数量
            if (this.isSmallScreen && \$item.minShow) {
                \$maxShow = \$item.minShow;
            }
            // 大屏幕并且有大屏展示数量
            else if (!this.isSmallScreen && \$item.maxShow) {
                \$maxShow = \$item.maxShow;
            }

            \$options = \$item.option;
            // 都可以展示
            if (!\$options || \$options.length <= \$maxShow) return [];
            
            var stage = \$w.dataNoBind(\$options);
            stage = \$w.array_values(stage);
            return stage.splice(\$maxShow);
        },
        /**
         * 是否存在隐藏选项
         */
        isHadHideOpt: function (\$item) {
            \$maxShow = \$item.maxShow || this.optMaxShow;
            // 选项列表
            var options = \$item.option;
            // 对象的话判断他的键值列表即可
            if (\$item.option instanceof Object) {
                options = Object.keys(\$item.option);
            }
            return options && options.length > \$maxShow;
        },
        /**
         * 按个数分组取出列表
         */
        getField: function (\$fields, \$groupIndex) {
        
            return \$w.dataNoBind(\$fields).slice(\$groupIndex * $baseColumn, $baseColumn)
        },
        /**
         * 检测分页大小改变
         */
        handleSizeChange: function (\$item, \$group) {
            // 改为第一页
            this.\$set(\$item, 'page', 1);
            var ref = this.\$refs[\$group + '_' + \$item['name']];
            // 运行加载下一页
            \$item.method(ref ? ref.query : null);
        },
        /**
         * 检测分页第几页改变
         */
        handleCurrentChange: function (\$item, \$group) {
            var ref = this.\$refs[\$group + '_' + \$item['name']];
            // 运行加载下一页
            \$item.method(ref ? ref.query : null);
        },
        /**
         * [查询选择框]改变
         */
        searchSelectChange(\$item, \$group) {
        
            // 更多不操作
            if (\$group == 'groupMore') return false;
            
            // 其他分组
            var ref = this.\$refs[\$group + '_' + \$item['name']];
            var length = this.value[\$item.name] ? this.value[\$item.name].length : 0;
            
            var that = this;
            this.\$nextTick(function () {
                var dom = jQuery(ref[0]['\$el']).find('.el-select__tags > .' + \$item['name']);
                // 长度小于2需要删除
                if (length < 2) {
                    jQuery(ref[0]['\$el']).find('.el-select__tags > .' + \$item['name']).remove();
                }
                // 增加到2以上 && 没有dom需要增加
                else if (length > 1 && dom.length < 1) {
                    jQuery(ref[0]['\$el']).find('.el-select__tags > span')
                    .after("<span class='" + \$item['name'] + " add-num'>+" + length + "...</span>");
                }
                // 已有dom只需要更改文本
                else {
                    jQuery(ref[0]['\$el']).find('.el-select__tags > .' + \$item['name']).text(
                        "+" + length + "..."
                    );
                }
                that.submit();
            });
        }
    },
    watch: {
        /**
         * 顶部查询 - 顶部查询类型变化
         * @param val
         */
        'searchTopType': function (\$val) {
        
            // 先还原[组合字段]
            this.initField('groupFields', true);
            
            for (var i in this.groupFields) {
                // 先初始化分组查询最终值的值
                this.value[this.groupFields[i]['name']] = null;
                
                if (this.groupFields[i]['name'] !== \$val) continue;
                this.groupText = this.groupFields[i]['text'];
            }
            
            // 重新赋值下值 - 具体效果就是不清空现在查询框内容
            this.value[\$val] = this.searchTopValue;
        },
        /**
         * 顶部查询类型变化
         * @param \$val
         */
        'searchTopValue': function (\$val) {
             this.value[this.searchTopType] = \$val;
        },
        /**
         * 初始化[组合字段]
         */
        'groupFields': {
            handler: function () {
                this.initField('groupFields');
            },
            deep: true,
            immediate: true
        },
        /**
         * 初始化[组合字段] - 组合搜索右侧
         */
        'groupOtherFields': function () {
            this.initField('groupOtherFields');
        },
        /**
         * 初始化[基础字段] - 组合下面
         */
        'baseFields': function () {
            this.initField('baseFields');
        },
        /**
         * 初始化[更多字段] - 隐藏字段
         */
        'moreFields': function () {
            this.initField('moreFields');
        }
    }
});
EOT;
$css = <<<CSS

    .card-radio-btn {
        max-height: 26px;
        line-height: 17px;
        font-size: 14px;
        padding: 5px 10px;
        vertical-align: middle;
    }
CSS;

if (empty($this->params['reg_search'])) BackendAsset::addCss($this, '/plugin/vue-treeselect/css/vue-treeselect.min.css');
if (empty($this->params['reg_search'])) BackendAsset::addScript($this, '/plugin/vue-treeselect/js/vue-treeselect.min.js');
if (empty($this->params['reg_search'])) $this->registerCss($css);
if (empty($this->params['reg_search'])) $this->registerJs($js);
// 已注册过
$this->params['reg_search'] = true;

echo "<search :group-fields='$groupFields' :group-other-fields='$groupOtherFields' :base-fields='$baseFields' :more-fields='$moreFields' $export $submit ref='$prefix'></search>";
?>
